<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
// @ts-expect-error
import jsonToGo from './json-to-go.js'
import {GoStructConverter} from "@/views/devTool/component/structConver.ts";

const showJsonPretty = ref(true)

const generatedStruct = ref('')
const clickFormatBtn = () => {
  showJsonPretty.value = true
}

const clickGo2Type = ()=>{
  showJsonPretty.value = false
  generatedStruct.value =GoStructConverter.convert(state.val)
}

const clickClearBtn = () => {
  state.val = ''
}

const clickCopyBtn = async () => {
  if (showJsonPretty.value) {
    await navigator.clipboard.writeText(state.val) // 复制文本
  } else {
    await navigator.clipboard.writeText(generatedStruct.value) // 复制文本
  }
  ElMessage('复制成功')
}

const clickToGoBtn = () => {
  showJsonPretty.value = false
  generatedStruct.value = jsonToGo(JSON.stringify(state.data)).go
}

const clickToLowerBtn = () => {
  showJsonPretty.value = false
  generatedStruct.value = state.val.toLowerCase()
}

const clickToUpBtn = () => {
  showJsonPretty.value = false
  generatedStruct.value = state.val.toUpperCase()
}

const defaultData = {
  state: 200,
  name: 'hcy',
}
const state = reactive({
  val: JSON.stringify(defaultData),
  data: defaultData,
  showLine: true,
  showLineNumber: false,
  editable: true,
  editableTrigger: 'click',
  deep: 3,
})

watch(
  () => state.val,
  (newVal) => {
    if (newVal == '') {
      newVal = '{}'
    }
    state.data = JSON.parse(newVal)
  },
)

watch(
  () => state.data,
  (newVal) => {
    let str = JSON.stringify(newVal)
    if (str == '{}') {
      str = ''
    }
    state.val = str
  },
)
</script>

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-card>
          <div class="h-80 overflow-auto">
            <el-input
              class="w-full"
              v-model="state.val"
              :autosize="{ minRows: 6, maxRows: 8 }"
              type="textarea"
              placeholder="Please input"
            />
            <div class="flex mt-2">
              <el-button type="primary" @click="clickFormatBtn">格式化</el-button>
              <el-button type="primary" @click="clickToGoBtn">toGo</el-button>
              <el-button type="primary" @click="clickToLowerBtn">转小写</el-button>
              <el-button type="primary" @click="clickToUpBtn">转大写</el-button>
            </div>
            <div class="flex mt-2">
              <el-button type="primary" @click="clickGo2Type">Go2Type</el-button>
              <el-button type="primary" @click="clickToGoBtn">Go2Interface</el-button>
            </div>
            <div class="flex mt-2">
              <el-button type="success" @click="clickClearBtn">清空</el-button>
              <el-button type="success" @click="clickCopyBtn">复制</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="h-80 overflow-auto">
            <vue-json-pretty
              v-show="showJsonPretty"
              v-model:data="state.data"
              :deep="state.deep"
              :show-double-quotes="true"
              :show-line="state.showLine"
              :show-line-number="state.showLineNumber"
              :editable="state.editable"
            />
            <el-input
              v-show="!showJsonPretty"
              v-model="generatedStruct"
              :rows="10"
              type="textarea"
            ></el-input>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped></style>
